<template>
	<view>
		<!-- 顶部 -->
		<view class="topBar">
			<!-- 自定义导航栏 -->
			<view>
				<uni-nav-bar @clickLeft="back" height="50px" backgroundColor="#3284fc" left-icon="left" :border="false"
					leftText="返回" rightText="设置" title="汽车保养-洗车" color="#fff" />
			</view>


			<!-- 大美汽车保养厂(解放路店) -->
			<uni-card class="card1" :cover="cover">
				<image slot='cover' style="width: 100%; margin-top: 20rpx; border-radius: 30rpx;" :src="cover"></image>
				<view class="carHoomInfo">
					<view class="title1">大美汽车保养厂(解放路店)</view>
					<view class="starInfo">
						<u-rate activeColor="yellow" inactiveColor="green" :count="count1" v-model="value1"></u-rate>
						<text style="margin: 0 20rpx;">5分</text>
						<text>售量:556</text>
					</view>
					<view class="carInfo">
						<view class="info1">
							<view>营业时间:&nbsp;&nbsp;周一到周五</view>
							<view>早上8:00-晚上22:00</view>
						</view>
						<view class="info2">
							<view>位置: 山阳区人民路与解放路交叉口</view>
							<image style="width: 38rpx; height: 38rpx; background-color: blue;"
								src="../../static/myf_img/plane@2x.png">
						</view>

						</image>
					</view>
				</view>
			</uni-card>

			<!-- 服务项目 -->
			<uni-card class="card2">
				<view style="font-size: 36rpx;font-weight: 700;">服务项目</view>
				<view class="serviceItem">
					<view class="info1">
						<uni-data-checkbox multiple v-model="checkbox1" :localdata="hobby1"></uni-data-checkbox>
						<view class="money">
							<view style="font-size: 28rpx; color: orange; font-weight: 700;">￥35.9</view>
							<view style="font-size: 24rpx; font-weight: 700; text-decoration: line-through;">￥60</view>
						</view>
					</view>
					<view style="margin-top: 10rpx;">
						这里是精洗服务的详细介绍, 这里是精洗服务的详细介绍, 这里是精洗服务的详细介绍
					</view>
				</view>
				<view class="serviceItem">
					<view class="info1">
						<uni-data-checkbox multiple v-model="checkbox2" :localdata="hobby2"></uni-data-checkbox>
						<view class="money">
							<view style="font-size: 28rpx; color: orange; font-weight: 700;">￥35.9</view>
							<view style="font-size: 24rpx; font-weight: 700; text-decoration: line-through;">￥60</view>
						</view>
					</view>
					<view style="margin-top: 10rpx;">
						这里是精洗服务的详细介绍, 这里是精洗服务的详细介绍, 这里是精洗服务的详细介绍
					</view>
				</view>
				<view style="border-bottom: none;" class="serviceItem">
					<view class="info1">
						<uni-data-checkbox multiple v-model="checkbox3" :localdata="hobby3"></uni-data-checkbox>
						<view class="money">
							<view style="font-size: 28rpx; color: orange; font-weight: 700;">￥35.9</view>
							<view style="font-size: 24rpx; font-weight: 700; text-decoration: line-through;">￥60</view>
						</view>
					</view>
					<view style="margin-top: 10rpx;">
						这里是精洗服务的详细介绍, 这里是精洗服务的详细介绍, 这里是精洗服务的详细介绍
					</view>
				</view>
			</uni-card>

			<!-- 服务项目 -->
			<uni-card class="card3">
				<view style="font-size: 36rpx;font-weight: 700;">服务评价</view>
				<view class="serviceConItem">
					<!-- 头像 -->
					<u-avatar size="100rpx" :src="src" shape="circle"></u-avatar>
					<view class="contentInfo">
						<view class="info1">
							<u--text mode="name" text="黄小云" format="encrypt"></u--text>
							<view>2024-12-09</view>
						</view>
						<view class="info2">
							<u-rate activeColor="yellow" inactiveColor="green" :count="count2"
								v-model="value2"></u-rate>
						</view>
						<view class="info3">
							洗的非常干净, 几个小伙子很用心, 态度也很好, 强烈推荐来这家店洗车! ! !
						</view>

					</view>
				</view>
				<view class="serviceConItem">
					<!-- 头像 -->
					<u-avatar size="100rpx" :src="src" shape="circle"></u-avatar>
					<view class="contentInfo">
						<view class="info1">
							<u--text mode="name" text="美杜莎" format="encrypt"></u--text>
							<view>2024-12-09</view>
						</view>
						<view class="info2">
							<u-rate activeColor="yellow" inactiveColor="green" :count="count2"
								v-model="value2"></u-rate>
						</view>
						<view class="info3">
							洗的非常干净, 几个小伙子很用心, 态度也很好, 强烈推荐来这家店洗车! ! !
						</view>

					</view>
				</view>
				<view style="border-bottom: none;" class="serviceConItem">
					<!-- 头像 -->
					<u-avatar size="100rpx" :src="src" shape="circle"></u-avatar>
					<view class="contentInfo">
						<view class="info1">
							<u--text mode="name" text="萧炎" format="encrypt"></u--text>
							<view>2024-12-09</view>
						</view>
						<view class="info2">
							<u-rate activeColor="yellow" inactiveColor="green" :count="count2"
								v-model="value2"></u-rate>
						</view>
						<view class="info3">
							洗的非常干净, 几个小伙子很用心, 态度也很好, 强烈推荐来这家店洗车! ! !
						</view>

					</view>
				</view>
			</uni-card>

			<!-- 底部按钮 -->
			<view class="bottomBtn">
				<uni-section title="">
					<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup" @click="onClick"
						@buttonClick="buttonClick" />
				</uni-section>

				<!-- 服务订单弹出框 -->
				<view v-if="show" class="serviceOrder">
					<view class="orderTitle">
						<view style="font-size: 36rpx;font-weight: 700;">
							服务订单
						</view>
						<view @click="closePage" style="font-size: 36rpx;">X</view>
					</view>

					<view class="orderItem">
						<uni-data-checkbox multiple v-model="checkbox4" :localdata="hobby4"></uni-data-checkbox>
						<view style="font-size: 30rpx; font-weight: 700;">￥199</view>
					</view>
					<view class="orderItem">
						<uni-data-checkbox multiple v-model="checkbox5" :localdata="hobby5"></uni-data-checkbox>
						<view style="font-size: 30rpx; font-weight: 700;">￥199</view>
					</view>
					<view class="orderItem">
						<uni-data-checkbox multiple v-model="checkbox6" :localdata="hobby6"></uni-data-checkbox>
						<view style="font-size: 30rpx; font-weight: 700;">￥199</view>
					</view>

					<view class="orderBtn">
						<button
							style=" color: #fff; width: 260rpx; height: 80rpx; border-radius: 50rpx; background-color: orange;">合计:&nbsp;&nbsp;￥360</button>
						<button
							style=" color: #fff; width: 260rpx; height: 80rpx; border-radius: 50rpx; background-color: orangered;">确认已选择服务</button>
					</view>
				</view>
			</view>



		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false, // 是否显示服务订单
				customButtonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #1E83FF, #0053B8)',
						color: '#fff'
					},
					// {
					// 	text: '确定已选服务',
					// 	backgroundColor: 'linear-gradient(90deg, #60F3FF, #088FEB)',
					// 	color: '#fff'
					// }
				],
				options: [{
					icon: 'chat',
					text: '客服'
				}, {
					icon: 'shop',
					text: '店铺',
					info: 0,
					infoBackgroundColor: '#007aff',
					infoColor: "#f5f5f5"
				}, {
					icon: 'cart',
					text: '购物车',
					info: 0
				}],
				src: '/static/myf_img/tx.jpg',
				hobby1: [{
					text: '小保养套餐(合成机油-机滤)',
					value: ""
				}],
				checkbox1: [0],
				hobby2: [{
					text: '小保养套餐(合成机油-机滤)',
					value: ""
				}],
				checkbox2: [0],
				hobby3: [{
					text: '小保养套餐(合成机油-机滤)',
					value: ""
				}],
				checkbox3: [0],
				hobby4: [{
					text: '日式水晶打腊',
					value: ""
				}],
				checkbox4: [0],
				hobby5: [{
					text: '车身去氧化',
					value: ""
				}],
				checkbox5: [0],
				hobby6: [{
					text: '内饰清洗',
					value: ""
				}],
				checkbox6: [0],
				cover: '/static/myf_img/车店.jpg',
				count1: 5,
				value1: 5,
				count2: 5,
				value2: 5,
				count3: 5,
				value3: 5,
				count4: 5,
				value4: 5,
			}
		},
		methods: {
			closePage() {
				this.show = false;
				// 清空已选择的
			    this.checkbox4=[];
				this.checkbox5=[];
				this.checkbox6=[];
			},
			onClick() {

			},
			// onClick(e) {
			// 	uni.showToast({
			// 		title: `点击${e.content.text}`,
			// 		icon: 'none'
			// 	})
			// },
			buttonClick(e) {
				console.log(e);
				this.options[2].info++;
				this.show = true;
			},
			back() {
				uni.switchTab({
					url: '/pages/about/about'
				})
			},
		}
	}
</script>

<style>
	.serviceOrder .orderBtn {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0 20rpx 30rpx;
		background-color: #fff;
	}

	.serviceOrder .orderItem {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid #bfbfbf;
		padding: 30rpx 0 20rpx 30rpx;
	}

	.serviceOrder .orderTitle {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid #bfbfbf;
		padding: 30rpx 0 20rpx 30rpx;
	}

	.serviceOrder {
		z-index: 1000;
		width: 750rpx;
		height: 400rpx;
		background-color: #fff;
		border-radius: 30rpx;
		margin-top: -630rpx;
		
	}

	/* -------- */
	.bottomBtn {
		margin-top: 200rpx;
		width: 750rpx;
	}

	.contentInfo .info2 {
		margin: 20rpx auto;
	}

	.contentInfo .info1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 500rpx;
	}

	.serviceConItem .contentInfo {
		width: 500rpx;
	}

	.serviceConItem {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 30rpx;
		border-bottom: 2rpx solid #bfbfbf;
		padding-bottom: 10rpx;
	}

	.serviceItem .info1 .money {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 150rpx;
	}

	.serviceItem .info1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}

	.serviceItem {
		border-bottom: 2rpx solid #bfbfbf;
		padding-bottom: 10rpx;
	}
	.card3{
			border-radius: 30rpx;
			z-index: -99;
	}

	.card2 {
		border-radius: 30rpx;
	}

	.carHoomInfo .carInfo .info2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 450rpx;
	}

	.carHoomInfo .carInfo .info1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 510rpx;
		margin: 20rpx auto;
	}

	.carHoomInfo .carInfo {
		margin: 20rpx auto;
	}

	.carHoomInfo .starInfo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 400rpx;
		margin-top: 20rpx;
	}

	.carHoomInfo .title1 {
		font-size: 36rpx;
		font-weight: 700;
	}

	.card1 .carHoomInfo {
		width: 500rpx;

	}

	.card1 {
		border-radius: 30rpx;
	}

	.topBar {
		background-color: #3284fc;
		width: 750rpx;
		height: 400rpx;
	}
</style>